<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户使用</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>//JS大小写去分
		function checkUname(){
			//从文本框提取用户名
			username=$("#uname").val();//val取值 $("#uname")文本框的ID对应的值
			console.log(username);//跟踪JS程序
			//正则表达式
			regexp=/^[a-zA-Z0-9]{6,20}$/;
			if(!regexp.test(username)){
				alert("用户名不合法");
				//jQuery语法 JS函数库 用于简化
				$("#uname").css("border","1px solid red")
			}else{
	            $("#uname").css("border","1px solid green")  			
			}
			}
			function checkTel(){
				number=$("#tel").val();
				console.log(tel);
				regexp=/^[0-9]{11}$/;
				if(!regexp.test(number)){
				$("#tel").css("border","1px solid red")
			}else{
	            $("#tel").css("border","1px solid green") } 
			
		}
	</script>
	</head>
	<body>
		<div class="container">
		<h2>用户注册</h2>
		<form >
			<div class="form-group">
			<label >用户名</label>
			<input  onblur="checkUname()" type="text" id="uname" class="form-control" placeholder="请输入用户名">
			
			</div>
			<div class="form-group">
			<label >手机号码</label>
			<input  onblur="checkTel()" type="text" id="tel" class="form-control" placeholder="请输入电话号码">
			</div>
			<button class="btn btn-danger">注册</button>
		</form>
		</div>
	</body>
</html>